<template>
  <div>
    <aside id="shared-sidebar">
      <nav id="shared-first-sidebar">
        <div id="shared-team-logo">
          <a class="shared-team-logo-wrap">
            <div class="shared-team-logo" style="background-image: url(./../assets/images/logo.png);"></div>
          </a>
        </div>
        <ul id="shared-first-sidebar-nav">
          <template v-for="(item, index) in menuList">
            <li @mouseenter="enterMenu(item)" @mouseleave="leaveMenu(item)" v-if="!item.hideInMenu" :key="index" :class="{active:item.name == activeName}">
              <a @click="handleClick(item)" href="javascript:;"><font-awesome-icon :icon="item.icon" />{{item.title}}</a>
            </li>
          </template>
        </ul>
      </nav>
      <nav class="shared-second-sidebar" v-if="menuFirst&&menuFirst.name&&menuFirst.name!='home'&&menuFirst.name!='report'">
        <h2 class="second-sidebar-title">{{menuFirst.secondMenuTitle}}</h2>
        <ul class="shared-second-sidebar-nav">
          <template v-for="(item, index) in secondMenuList">
            <li v-if="!item.hideInMenu" class="second-group-nav" :class="{'collapsed':item.collapsed, 'active':(showName==item.name)}" :key="index">
              <div class="second-group-title" @click="handleTitleClick(item)"><i class="el-icon-arrow-down" v-if="item.child && item.child.length>0"></i>{{item.title}}</div>
              <ul class="second-group-body" v-if="item.child && item.child.length>0">
                <template v-for="(item2, index2) in item.child">
                  <li class="second-nav-item" v-if="!item2.hideInMenu" :class="{'active':(showName==item2.name)}" :key="index2">
                    <a href="javascript:;" @click="handleChildClick(item2)">{{item2.title}}</a>
                  </li>
                </template>
              </ul>
            </li>
          </template>
        </ul>
      </nav>
    </aside>
    <div id="app-container" class="container" :class="{'no_child':(!menuFirst||menuFirst.name=='home'||menuFirst.name=='report')}">
      <div id="app-third-sidebar" class="js-app-third-sidebar">
        <div class="zent-breadcrumb js-page-breadcrumb">
          <template v-if="meta&&meta.bt_path&&meta.bt_path.length>0">
            <template v-for="(item, index) in meta.bt_path">
              <span v-if="index==meta.bt_path.length-1" :key="index">{{item.title}}</span>
              <a href="javascript:;" @click="toBread(item)" v-else :key="index">{{item.title}}</a>
            </template>
          </template>
          <div class="app-right" v-if="loginName">
            <el-dropdown>
                <el-button type="text">{{ loginName }} <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="modifyPassword()"><i class="el-icon-edit"></i> 修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="logout()"><i class="el-icon-switch-button"></i> 退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- <span>{{meta?meta.bt:""}}</span> -->
        </div>
      </div>

      <div class="app">
        <div class="app-inner clearfix">
          <router-view/>
        </div>
      </div>
    </div>
    <div class="second-portal-wrap" v-if="hoverMenu&&hoverMenu.child&&hoverMenu.child.length>0&&hoverMenu.name!='home'&&hoverMenu.name!='report'">
      <nav class="shared-second-sidebar">
        <h2 class="second-sidebar-title">{{hoverMenu.secondMenuTitle}}</h2>
        <ul class="shared-second-sidebar-nav">
          <template v-for="(item, index) in hoverMenu.child">
            <li v-if="!item.hideInMenu" class="second-group-nav" :class="{'collapsed':item.collapsed, 'active':(showName==item.name)}" :key="index">
              <div class="second-group-title" @click="handleTitleClick(item)"><i class="el-icon-arrow-down" v-if="item.child && item.child.length>0"></i>{{item.title}}</div>
              <ul class="second-group-body" v-if="item.child && item.child.length>0">
                <template v-for="(item2, index2) in item.child">
                  <li v-if="!item2.hideInMenu" class="second-nav-item" :class="{'active':(showName==item2.name)}" :key="index2">
                    <a href="javascript:;" @click="handleChildClick(item2)">{{item2.title}}</a>
                  </li>
                </template>
              </ul>
            </li>

          </template>

        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { getToken,removeToken } from '@/utils/auth'
import { mapGetters, mapState } from 'vuex'
import { userPermissions } from "@/api/user";
export default {
  components: {
  },
  data() {
    return {
      hasTransition: false,
      isHome: false,
      hoverMenu: null,
      // permissionList: [],
      // menuList: [],
      // secondMenuList: [],
      // activeName: "",
    }
  },
  computed: {
      ...mapState({
        menuList: state => state.menuList,
        activeName: state => state.menuIndexData.pName,
        meta: state => state.breadCrunbData,
        showName: state => state.breadCrunbData.showName || state.breadCrunbData.name,
        menuIndex: state => state.menuIndexData,
        permissionList: state => state.permissions
      }),
      ...mapGetters([
        'secondMenuList'
      ]),
      menuFirst: function() {
        let m = {}
        this.menuList.forEach((item)=>{
          // console.log(item.name + "-" + this.activeName)
          if(item.name == this.activeName) {
            m = item;
            return false;
          }
        })
        return m
      },
      loginName: function() {
        return localStorage.getItem("LOGIN_USERNAME") || "";
      },
      
  },
  watch:{
    navNum(nval) {
      if (nval) {
        this.showSecondMenu = true
      }
    }
  },
  beforeMount() {
    // this.navNum && (this.showSecondMenu = true)
    // this.showSecondMenu = true
    // console.log(this.menuIndex)
    // console.log(this.activeName)
    console.log(this.menuFirst)
  },
  mounted() {
    this.getUserPermissions();
    // this.isHome = this.$router.currentRoute.name && this.$router.currentRoute.name === "home_index";

    console.log(this.menuList)
    setTimeout(() => {
      this.hasTransition = true
    }, 500);
  },
  methods: {
    getUserPermissions() {
      userPermissions().then((res)=>{
        // this.permissionList = res.data;
        store.dispatch('setPermission', res.data)

        /*
        let menus = [];
        menus.push({
          name: "home",
          icon: "home",
          path: "/",
          secondMenuTitle: "首页",
          title: "首页",
          child: [
            {
              name: "index",
              path: "/",
              title: "首页"
            }
          ]
        });

        if($.inArray("goods_list:view", this.permissionList) != -1 
          || $.inArray("goods_cat:view", this.permissionList) != -1) {
          let subs = [];

          let hasList = false;
          let hasCat = false;
          if($.inArray("goods_list:create", this.permissionList) != -1) {
            subs.push({
              name: "goods_create",
              path: "/goods/create",
              title: "选品入库"
            })
          }

          if($.inArray("goods_list:view", this.permissionList) != -1) {
            subs.push({
              name: "goods_list",
              path: "/goods/list",
              title: "商品列表"
            })
            hasList = true;
          }

          if($.inArray("goods_cat:view", this.permissionList) != -1) {
            subs.push({
              name: "goods_cat",
              path: "/goods/cat",
              title: "商品分类"
            })
            hasCat = true;
          }

          menus.push({
            name: "goods",
            icon: "shopping-cart",
            path: "/goods",
            redirect: hasList ? "/goods/list" : "/goods/cat",
            secondMenuTitle: "商品",
            title: "商品",
            child: subs
          });
        }

        if($.inArray("order_list:view", this.permissionList) != -1) {
          menus.push({
            name: "order",
            icon: "list",
            path: "/order",
            redirect: "/order",
            secondMenuTitle: "订单",
            title: "订单",
            child: [
              {
                name: "order_all",
                path: "/order",
                title: "全部订单"
              },
              {
                name: "order_send",
                path: "/order?type=send",
                title: "待发货"
              },
              {
                name: "order_receive",
                path: "/order?type=receive",
                title: "待收货"
              },
              {
                name: "order_complete",
                path: "/order?type=complete",
                title: "已完成"
              },
              {
                name: "order_closed",
                path: "/order?type=closed",
                title: "已关闭"
              },
              {
                name: "order_feedback",
                path: "/order?type=feedback",
                title: "维权订单"
              }
            ]
          });
        }

        let financeMenus = [];
        if($.inArray("finance_list:view", this.permissionList) != -1) {
          financeMenus.push({
            name: "finance_list",
            path: "/finance",
            title: "账单余额"
          });
        }
        if($.inArray("finance_list:detail", this.permissionList) != -1) {
          financeMenus.push({
            name: "finance_detail",
            path: "/finance/detail",
            title: "结算明细"
          });
        }
        if($.inArray("finance_list:bill", this.permissionList) != -1) {
          financeMenus.push({
            name: "finance_bill",
            path: "/finance/bill",
            title: "对账单"
          });
        }

        if(financeMenus.length > 0) {
          menus.push({
            name: "finance",
            icon: "shopping-cart",
            path: "/finance",
            redirect: financeMenus[0].path,
            secondMenuTitle: "财务",
            title: "财务",
            child: financeMenus
          });
        }

        if($.inArray("report_list:view", this.permissionList) != -1) {
          menus.push({
            name: "finance",
            icon: "shopping-cart",
            path: "/report",
            redirect: "/report",
            secondMenuTitle: "统计",
            title: "统计"
          });
        }

        let settingMenus = [];
        if($.inArray("setting_account:view", this.permissionList) != -1) {
          settingMenus.push({
            name: "setting_account",
            path: "/setting/account",
            title: "子账号"
          });
        }

        if($.inArray("setting_role:view", this.permissionList) != -1) {
          settingMenus.push({
            name: "setting_role",
            path: "/setting/role",
            title: "角色管理"
          });
        }

        settingMenus.push({
            name: "modify_password",
            path: "/modify_password",
            title: "修改密码",
            hideInMenu: true,
          });

        if(settingMenus.length > 1) {
          menus.push({
            name: "setting",
            icon: "cog",
            path: "/setting",
            redirect: settingMenus[0].path,
            secondMenuTitle: "设置",
            title: "设置",
            child: settingMenus
          });
        }

        this.menuList = menus;
        */
          // console.log(this.menuList)

        // let currentRouter = this.$router.currentRouter;
        // this.menuList.forEach((item)=>{
        //           console.log(item.name + "-" + currentRouter.name)
        //   if(item.name == currentRouter.name) {
        //     this.secondMenuList = [];
        //   } else {
        //     if(item.child) {
        //       console.log(item.child)
        //       item.child.forEach((item2)=>{
        //         if(item2.name == currentRouter.name) {
        //           console.log(item2.name + "-" + currentRouter.name)
        //           this.secondMenuList = item;
        //           return false;
        //         }
        //       })
        //     }
        //   }
        // })
        // console.log(this.secondMenuList)
        // console.log(this.menuList)
      }).catch((err)=>{

      })
    },
    handleClick(item){
      // let name = item.name
      // if(name === "home") {
      //   name = "home_index"
      // }
      // console.log(item)
      this.$router.push({path:item.path})
    },
    hideSecond() {
      this.showSecondMenu = !this.showSecondMenu 
    },
    handleChildClick(item) {
      // console.log(item)
      this.$router.push(item.path)
    },
    handleTitleClick(item) {
      if(item.child && item.child.length>0) {
        if(!item.collapsed) {
          item.collapsed = true;
        } else {
          item.collapsed = false;
        }
      } else {
        this.$router.push(item.path)
      }
    },
    enterMenu(item) {
      // if(this.hoverMenu && this.menuFirst && this.hoverMenu.name == this.menuFirst.name) {
      //   return;
      // }
      this.hoverMenu = item;
      // console.log(item)
    },
    leaveMenu(item) {

    },
    toBread(item) {
      if(item) {
        if(item.hasGroup&&item.child && item.child.length>0) {
          this.$router.push(item.child[0].path)
        }
      }
      console.log(item)
    },
    logout() {
      removeToken();
      this.$router.push({ path: '/login/signin' })
    },
    modifyPassword() {
      this.$router.push({ path: '/modify_password' })
    }
  }
}
</script>

<style lang="scss" scoped>
  #shared-sidebar {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 92px;
    font-family: -apple-system,blinkmacsystemfont,Helvetica Neue,helvetica,arial,PingFang SC,Hiragino Sans GB,Microsoft Yahei,stheiti,simsun,sans-serif;
    z-index: 11;

    #shared-first-sidebar {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 92px;
      background-color: #191919;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      flex-direction: column;
      overflow: hidden;
      z-index: 2;

      #shared-team-logo {
        position: fixed;
        top: 0;
        bottom: 0;
        height: 56px;
        width: 92px;
        word-break: break-word;
        background: #191919;
        z-index: 1002;

        .shared-team-logo-wrap {
          display: block;
          margin: 0 16px;
          height: 56px;
          overflow: hidden;

          .shared-team-logo {
              margin: 12px auto 0;
              width: 32px;
              height: 32px;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              background-size: cover;
              background-position: 50% 50%;
              background-color: #fff;
              border: 1px solid #fff;
          }
        }
      }

      #shared-first-sidebar-nav {
        margin-top: 56px;
        padding-right: 20px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        -moz-box-flex: 1;
        flex: 1 1 100%;
        overflow-x: hidden;
        overflow-y: scroll;

        li {
          width: 92px;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          &:hover {
            background:#666;

            a {
              color:#fff;
            }
          }

          .svg-inline--fa {
            margin-right:6px;
          }

          a {
            color: #c8c9cc;
            display: block;
            padding-left: 18px;
          }
          &.active {
            background-color:white;
            a {
              color:#333;
            }
          }
      }
    }
  
  }
}

.shared-second-sidebar {
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    transition:all .2s;
    width:132px;
    height:100%;
    margin-left:92px;
    padding-bottom:40px;
    background-color:#fff;
    border-right:1px solid #ebedf0;
    z-index:1;
    position:relative;
    // -webkit-transform:translateX(-100%);
    // -moz-transform:translateX(-100%);
    // transform:translateX(-100%);
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    transform:translateX(0);
    overflow:hidden;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-family:-apple-system,blinkmacsystemfont,Helvetica Neue,helvetica,arial,PingFang SC,Hiragino Sans GB,Microsoft Yahei,stheiti,simsun,sans-serif;
      
    .second-sidebar-title {
      -webkit-box-flex:0;
      -webkit-flex:0 0 56px;
      -moz-box-flex:0;
      flex:0 0 56px;
      padding-left:28px;
      width:100%;
      height:56px;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      border-bottom:1px solid #ebedf0;
      font-size:14px;
      color:#323233;
      line-height:56px;
      font-weight:500
    }
    .shared-second-sidebar-nav {
      -webkit-box-sizing:content-box;
      -moz-box-sizing:content-box;
      box-sizing:content-box;
      padding-right:20px;
      padding-left:12px;
      width:100%;
      overflow-x:hidden;
      overflow-y:scroll;

      li {
        position:relative;
        width:108px;
        min-height:30px;
        line-height:30px;
        padding:5px 0;
        color:#323233;
        cursor:pointer;
        font-size:14px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        background:#fff;

        &.active {
          .second-group-title {
              color: #323233;
              background-color: #ebedf0;
          }
        }

        &.collapsed {
          .second-group-title {
            i {
              -webkit-transform:rotate(270deg);
              -moz-transform: rotate(270deg);
              transform: rotate(270deg);

            }
          }

          .second-group-body {
            display:none;
          }
        }

        .second-group-title {
            position: relative;
            cursor: pointer;
            padding-left: 16px;

            i {
              position: absolute;
              top: 8px;
              left: -3px;
              // margin-left: 12px;
              margin-right: 12px;
              -webkit-transform:rotate(0deg);
              -moz-transform: rotate(0deg);
              transform: rotate(0deg);
            }
        }

        .second-nav-item {
          &.active {
            a {
              color: #323233;
              background-color: #ebedf0;
            }
          }
        }

        a {
          position: relative;
          display: block;
          color: #323233;
          text-align: left;
          padding-left: 16px;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          font-size: 14px;
          text-align: left;
          padding-left: 24px;

          &:hover {
            color:#155bd4;
          }
        }
      }
    }
}
.container {
    zoom: 1;
    margin: 0 auto;
    padding: 0;
    width: 1000px;
}

#app-container {
    margin: 0 0 0 200px;
    background: #f7f8fa;
    width: auto;
    margin-left: 224px;
    padding-bottom: 50px;
    min-width: 960px;

    &.no_child {
      margin-left: 92px;
    }

    #app-third-sidebar {
      position:relative;
      height:56px;
      min-width:750px;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      background:#fff;
      border-bottom:1px solid #e5e5e5;
      padding:0 100px 0 5px;
      -webkit-transition:padding-right .5s;
      -moz-transition:padding-right .5s;
      transition:padding-right .5s;

      .zent-breadcrumb {
        padding:21px;
        a {
          color: #969799;

          &:after {
            content: '/';
            display: inline-block;
            color: #969799;
            margin: 0 8px;
          }
        }
        span {
          font-size: 14px;
          line-height: 1em;
          display: inline-block;
          vertical-align: middle;
          text-decoration: none;
        }
      }
    }

    .app-right {
      position: absolute;
      top: 0;
      right: 0;
      height: 56px;
      line-height: 56px;
      padding: 0 16px;
      font-size: 14px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: auto;
    }

    .app-inner {
      margin:10px;
      padding:15px;
      min-width:750px;
      min-height:500px;
      -webkit-box-shadow:none;
      box-shadow:none;
      background-color: white;
      overflow: auto;
    }
}


.second-portal-wrap {
	position:fixed;
	top:0;
	left:92px;
	width:132px;
	bottom:0;
  z-index:11;
  
  .shared-second-sidebar {
    margin-left:0;
  }
}
</style>